<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>extend</title>
  <script src="js/vue.js"></script>
  <script src="js/vuex.js"></script>
  <style> button{ width: 100px;margin-right: 20px; } </style>
</head>

<body>
  <div id="app">
    <!-- <p>你喜欢 {{$store.getters.listCount}} 件事</p> -->
    <p>你喜欢 {{listCount}} 件事</p>
    <button @click='add'>干</button>
    <button @click='addlater'>玩(2s后添加)</button>
    <ul>
      <li v-for='(item ,key) in $store.state.list'>{{item}}</li>
    </ul>
  </div>
  <script>
    const store = new Vuex.Store({
      state: {
        count: 0,
        list: ['吃', '喝', '拉', '撒', '睡']
      },
      getters:{
        listCount(state){
          return state.list.length;
        }
      },
      mutations: {
        addEvent(state, payload){
          console.log(payload);
          state.list.push(payload)
        }
      },
      actions:{
        // content store实例
        addEventLater(content, payload){
          setTimeout(() => {
            content.commit('addEvent',payload);
          }, 2000);
        }
      }
    })
    var vm = new Vue({
      el:'#app',
      store,
      computed: {
        listCount () {
          return this.$store.getters.listCount
        }
      },
      methods: {
        add() {
          this.$store.commit('addEvent', '干')
        },
        addlater(){
          this.$store.dispatch("addEventLater",'玩');
        }
      }
    })
  </script>
</body>

</html>